import React, { Component } from 'react'
import { Modal, QRCode, Button } from 'antd'
import domtoimage from 'dom-to-image'
import styles from './QrcodeModal.module.css'

export default class QRCodeModal extends Component {
  state = {
    visible: false, // 是否显示
    record: null, // 组织
  };
  show = (record) => {
    this.setState({
      visible: true,
      record,
    });
  }

  downloadQrcode = () => { // 下载二维码图片
    const { record } = this.state;
    domtoimage.toJpeg(document.getElementById('box'), { quality: 0.95 })
    .then(function (dataUrl) {
      const link = document.createElement('a');
      link.download = record.name + '.jpg';
      link.href = dataUrl;
      link.click();
    });
  }

  render() {
    const { visible, record } = this.state;
    return (
      visible && // 直接刷新一下dom
      <Modal
        title="下载二维码"
        centered
        open={visible}
        footer={<Button type="primary" onClick={this.downloadQrcode}>下载二维码</Button>}
        onCancel={() => this.setState({ visible: false })}
        width={550}
      >
        <div id="box" className={styles.box}>
          <div className={styles.title}>窗口：{record.name}</div>
          <div className={styles.subtitle}>请使用微信扫码进行评分</div>

          <QRCode size={300} value={record.id}></QRCode>
        </div>
      </Modal>
    )
  }
}